<template>
  <div class="vip">
    <div class="header">
      <img :src="imgUrl+'/member/member-banner.png'" alt="" class="header-bg">
      <div class="success">
        <div class="congratulation">恭喜你</div>
        <img :src="imgUrl+'/member/member-success.png'" alt="" class="img">
        <div class="text">拥有超享生活会员权益专属！</div>
      </div>
    </div>

    <!--    购买成功页面商品列表-->
    <div v-if="vipList&&vipList.length>0">
      <div class="vip-list">
        <div class="caption">
          <img :src="imgUrl+'/member/member-present.png'" alt="">
          <div class="title">{{ memberInfo.equityName }}权益专项</div>
        </div>

        <div class="list-content">
          <div class="list-wrap"
               @click="goDetails(item)"
               v-for="(item,index) in vipList"
               :key="index">
            <div class="list-item">
              <div class="inside">
                <div class="discounts">会员立省 <span
                  style="color: #EC0707">{{ (Number(item.marketPrice) - Number(item.salePrice)).toFixed(2) }}</span>元
                </div>
                <!--<img :src="imgUrl+'/member/member-product.png'" alt="" class="img">-->
                <div class="bg"></div>
                <img :src="item.productThumbnail" alt="" class="product-img">
                <div class="vip-price" v-show="item.equityCount!==0"><span
                  style="font-size: 12px">会员价：¥</span>{{ item.salePrice }}
                </div>
                <div class="has" v-show="item.equityCount===0">已领取</div>
              </div>
            </div>
          </div>
          <div v-show="!showMore&&show" class="more" @click="more">
            <img :src="imgUrl+'/member/more.png'" alt="" class="img">
          </div>
          <div v-show="showMore&&show" class="close" @click="more">
            <img :src="imgUrl+'/member/close.png'" alt="">
          </div>
        </div>
      </div>
    </div>

    <!--    底部权益列表-->
    <div class="member" v-if="surpriseList&&surpriseList.length>0">
      <div class="vip-card"
           v-for="(item,index) in surpriseList"
           :key="index">
        <img :src="imgUrl + '/member/member-ticket.png'" alt="">
        <div class="left">
          <div class="name">{{ item.equityName }}</div>
          <div class="predict">预计可省{{ item.reducedAmount }}元</div>
          <div class="desc">{{ item.subhead }}</div>
        </div>
        <div class="right" @click="join(item.equityNo)">
          <div class="join">立即参与 ></div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import Vue from 'vue'
import {Lazyload} from 'vant'

Vue.use(Lazyload)
export default {
  name: 'index',
  data() {
    return {
      memberInfo: {},
      vipList: [],
      showMore: false,
      show: false,
      moreList: [],
      closeList: [],
      // 会员权益
      surpriseList: [],
      surpriseBg: {
        backgroundImage: 'url(' + (this.imgUrl + '/member/member-ticket.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
        backgroundSize: '100%'
      }
    }
  },
  created() {
    this.getMemberInfo() // 获取权益包名字
    this.getVipList() // 权益专项列表
    this.getSurpriseList() // 底部权益包
  },
  methods: {
    // 1丶头部卡片信息======================================================
    getMemberInfo() {
      const params = {
        equityNo: this.$route.query.equityNo
      }
      this.$HttpPost(this.$api.equityDetail, params).then((res) => {
        if (res.code === '000') {
          this.memberInfo = res.content
        }
      })
    },

    // 2丶乐享权益列表======================================================
    getVipList() {
      this.closeList = []
      this.moreList = []
      this.vipList = []

      const params = {
        equityNo: this.$route.query.equityNo
      }
      this.$HttpPost(this.$api.equityProductList, params).then((res) => {
        if (res.code === '000') {
          var arr = res.content.productInfoShowDTOList
          this.moreList = arr
          if (arr.length > 4) {
            this.closeList = arr.slice(0, 4)
            this.vipList = this.closeList
            this.showMore = false
            this.show = true
          } else {
            this.vipList = arr
            this.showMore = true
            this.show = false
          }
        }
      })
    },
    more() {
      this.showMore = !this.showMore
      if (this.showMore === true) {
        this.vipList = this.moreList
      } else {
        this.vipList = this.closeList
      }
    },
    // 3丶会员权益列表======================================================
    // 获取重磅会员惊喜
    getSurpriseList() {
      this.$HttpPost(this.$api.equityList).then((res) => {
        if (res.code === '000') {
          this.surpriseList = res.content
        }
      })
    },
    // 4丶点击页面路由跳转||公共方法===================================================
    // 会员权益
    join(id) {
      this.$router.push({
        path: '/member/details',
        query: {
          equityNo: id
        }
      })
    },
    // 十大权益专享商品跳转
    goDetails(item) {
      if (item.productSecondClassify === 1) {
        this.$router.push({
          path: '/hotel/list',
          query: {
            activityProductNo: item.activityProductNo
          }
        })
      } else if (item.productSecondClassify === 2) {
        this.$router.push({
          path: '/actInterest',
          query: {
            activityProductNo: item.activityProductNo,
            equityNo: item.equityNo,
            productName: item.productName,
          }
        })
      } else if (item.productSecondClassify === 3) {
        this.$router.push({
          path: '/free',
          query: {
            activityProductNo: item.activityProductNo
          }
        })
      } else {
        this.$router.push({
          path: '/goods/details',
          query: {
            activityProductNo: item.activityProductNo,
          }
        })
      }
    },
  }
}
</script>

<style scoped lang="scss">
.vip {
  width: 750px;
  height: 100%;
  background-color: #FFFFFF;
  overflow: scroll;
  //background: linear-gradient(180deg,#f9dfcc 11%, #d59a75 105%);
}

//头部卡券类型
.header {
  position: relative;
  width: 100%;
  height: 500px;
  z-index: 0;

  .header-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 330px;
    z-index: -1;
  }

  //成功
  .success {
    position: absolute;
    width: 100%;
    height: 500px;
    z-index: 0;

    .img {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 700px;
      z-index: -1;
      transform: translate(-50%, 0);
    }

    .text {
      position: absolute;
      top: 67%;
      left: 50%;
      width: 100%;
      transform: translate(-50%, -50%);
      font-size: 37px;
      font-family: STSongti, STSongti-TC;
      font-weight: TC;
      text-align: center;
      color: #947748;
      line-height: 52px;
      letter-spacing: 2px;
    }

    .congratulation {
      position: absolute;
      top: 46%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      font-size: 41px;
      font-family: STSongti, STSongti-TC;
      font-weight: TC;
      text-align: center;
      color: #f8d1aa;
      letter-spacing: 2px;
    }
  }
}

//列表
.vip-list {
  margin-top: 50px;
  box-sizing: border-box;
  padding: 0 20px;

  .caption {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 60px;

    img {
      width: 38px;
      height: 38px;
    }

    .title {
      height: 60px;
      margin-left: 10px;
      line-height: 60px;
      text-align: left;
      font-weight: 600;
      box-sizing: border-box;
      padding: 0 10px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }

  .list-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 30px;
    background: #f7f3ef;
    border-radius: 18px;
    box-sizing: border-box;
    padding: 20px;

    .list-wrap {
      width: 50%;
      height: 318px;
      margin-bottom: 35px;

      .list-item {
        float: left;
        width: 318px;
        height: 318px;
        background: #ffffff;
        border-radius: 8px;
        overflow: hidden;
        box-sizing: border-box;
        padding: 10px;

        .inside {
          position: relative;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          border: 1px solid #fad092;
          border-radius: 8px;
          z-index: 0;
        }

        .img {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 100px;
          z-index: -1;
        }

        .bg {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 40px;
          z-index: -1;
          background-color: #FEE4BE
        }

        .product-img {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: calc(100% - 20px);
          height: calc(100% - 20px);
          z-index: -2;
        }


        .discounts {
          position: absolute;
          left: 0;
          top: 0;
          padding: 5px 10px;
          font-size: 25px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: center;
          color: #6d4834;
          z-index: 0;
          background: #fcdaa4;
          border-radius: 0 0 15px 0;
        }

        .vip-price {
          position: absolute;
          left: 50%;
          bottom: 0;
          width: 100%;
          height: 40px;
          transform: translate(-50%, 0);
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          font-size: 24px;
          text-align: center;
          color: #cb1c37;
          line-height: 40px;
        }

        .has {
          position: absolute;
          left: 50%;
          bottom: 0;
          width: 100%;
          height: 40px;
          transform: translate(-50%, 0);
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          font-size: 24px;
          text-align: center;
          color: #cb1c37;
          line-height: 40px;
        }

      }

      &:nth-child(2n) {
        .list-item {
          float: right;
        }
      }
    }

    .more {
      position: relative;
      width: 100%;
      height: 50px;

      img {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 30px;
        height: 22px;
        transform: translate(-50%, -50%);

      }
    }

    .close {
      position: relative;
      width: 100%;
      height: 70px;

      img {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 20px;
        height: 20px;
        display: block;
        content: '';
        transform: translate(-50%, -50%);
      }
    }
  }
}

//卡片
.member {
  width: 100%;
  padding-bottom: 64px;
  margin-top: 50px;
}

.vip-card {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 662px;
  height: 160px;
  margin: 0 auto;
  margin-bottom: 26px;
  background-size: 100%;
  border-radius: 4px 8px 8px 8px;
  z-index: 0;

  img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .left {
    width: calc(100% - 150px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 50px;

    .name {
      width: 100%;
      box-sizing: border-box;
      padding-right: 20px;
      font-size: 30px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #1a1a1a;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .predict {
      margin-top: 10px;
      margin-bottom: 15px;
      font-size: 24px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #936231;
      letter-spacing: 2px;
    }

    .desc {
      font-size: 26px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #ff6300;
      width: 100%;
      box-sizing: border-box;
      padding-right: 20px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

  }

  .right {
    width: 150px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .join {
      margin-right: 5px;
      padding: 4px 8px;
      font-size: 22px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: center;
      color: #936231;
      background-color: #F4DDC3;
      border-radius: 10px;
    }

  }
}

</style>
